
import { HomeOutlined, MenuFoldOutlined, MenuUnfoldOutlined, SettingOutlined } from "@ant-design/icons";
import { Menu, Icon } from "antd";
import { connect } from 'dva';
import { Component } from "react";
import styles from "./styles.less";
import router from 'umi/router';

const { SubMenu } = Menu;
function mapStateToProps({ baseModel }) {
  return {
    baseModel: baseModel
  };
}
@connect(mapStateToProps)
class LeftMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
    };
  }
  //渲染前调用
  componentWillMount() { }

  //左侧菜单宽带切换
  toggleCollapsed = () => {
    let { collapsed } = this.props.baseModel;
    this.props.dispatch({
      type: 'baseModel/setCollapsed',
      payload: !collapsed
    })
  };
  //点击菜单
  changeMenu = (e, routerUrl) => {
    this.props.dispatch({
      type: 'baseModel/setMenuName',
      payload: e
    })
    router.push(`/${routerUrl}`);
  }

  render() {
    let { collapsed } = this.props.baseModel;
    return (
      <div className={styles.LeftMenu} collapsed={collapsed} style={{ width: collapsed ? 80 : 256 }}>
        <div className={collapsed ? styles.menuBtnOne : styles.menuBtn}>
          {collapsed ? null : (
            <div className={styles.menuBtnWenZi}>菜单列表</div>
          )}
          <div
            className={collapsed ? styles.menuBtnQ : styles.menuBtnR}
            onClick={this.toggleCollapsed.bind()}
          >
            {collapsed ? <MenuFoldOutlined style={{ color: '#fff', fontSize: '16px' }} /> : <MenuUnfoldOutlined style={{ color: '#fff', fontSize: '16px' }} />}
          </div>
          {/* <img src={} onClick={this.onCollapse.bind()} /> */}
        </div>
        <Menu
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
          style={{ background: '#1A74EF' }}
        >
          <Menu.Item key="1" onClick={this.changeMenu.bind(this, '物资管理', 'material')} icon={<HomeOutlined />}>
            <Icon type="usergroup-add" style={{ display: 'none' }} />
            物资管理
          </Menu.Item>
          <Menu.Item key="2" onClick={this.changeMenu.bind(this, '物资仓库管理', 'materialHouse')} icon={<SettingOutlined />}>
            <Icon type="usergroup-add" style={{ display: 'none' }} />
            物资仓库管理
          </Menu.Item>

        </Menu>
      </div>
    );
  }
}

export default LeftMenu;
